<template>
  <div class="box2">
    <h2>人员信息</h2>
    <h3>学生姓名:{{name}}</h3>
    <h3>学生年龄:{{age}}</h3>
    <h3>学生住址:{{address}}</h3>
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.owqUym7Yi8v1S76taFP7fwAAAA?pid=ImgDet&rs=1" class="i1">
    <button @click="showData" class="btn">展示人员信息</button>
  </div>
</template>

<script>
  export default {
    name:'Person',
    data() {
      return {
        name:'嘎子',
        age:41,
        address:'河北省保定市',
      }
    },
    methods: {
      showData(){
        alert(`我叫${this.name}, 我今年${this.age}岁了, 我住在${this.address} 我不是人`,)
      }
    },
  }
</script>

<style scoped>
    .box2{
      background-color: #cef;
      padding: 10px;
      margin-top: 30px;
      box-shadow: 0 0 10px;
    }
    .btn{
      background-color: aqua;
      font-size: 20px;
    }
    .i1{
      width: 350px;
      height: 280px;
      box-shadow: 0 0 30px rgb(221, 10, 101);
    }
</style>